<!doctype html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>欢迎使用实验室管理系统</title>
  <link rel="stylesheet" href="./asset/css/components.css" />
  <link rel="stylesheet" href="./asset/css/bootstrap.css" />
  <link rel="stylesheet" href="./asset/css/plugins.css" />
  <link rel="stylesheet" href="./asset/css/main.css" />
  <link rel="stylesheet" href="./asset/css/themes.css" />
  <script type="text/javascript" src="./asset/js/jquery.min.js"></script>
</head>

<body style="background-color:yellowgreen">
  <div id="app">
    <div id="login">
      <div class="center">
        <dl>
          <dt>实验室设备管理系统</dt>
          <dd><span><i class="fa fa-fw fa-user"></i></span><input id="username" v-model="username"
              type="text" placeholder="请输入用户名"></dd>
          <dd><span><i class="fa fa-fw fa-lock"></i></span><input  id="password" v-model="password"
              type="password" placeholder="请输入密码"></dd>
          <dd><span><i class="fa fa-bookmark"></i></span>
          <select id="type" type="type" value="" style="flex: 1;height: 40px;border: 1px solid #ddd;padding: 0 10px;font-size: 14px;" name="type" v-model="type" lay-verify="">
            <option value="">请选择身份</option>
            <option value="1">用户</option>
            <option value="0">管理员</option>
          </select>
          </dd>
          <dd><button @click="toLogin()">确认登录</button></dd>
        </dl>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="./asset/js/axios.min.js"></script>
  <script type="text/javascript" src="./asset/js/vue.js"></script>
  <script type="text/javascript">
    const vue = new Vue({ // 实例化Vue对象
      el: '#app',// 绑定作用域
      data: { //定义数据 用于vue的双向绑定
        username: '',
        password: '',
        type: '',
      },
      methods: {
        toLogin: function () {
          let _this = this;
          if (_this.username == '') {
            alert('请输入用户名');
            return;
          }
          if (_this.password == '') {
            alert('请输入密码');
            return;
          }
          if (_this.type == '') {
            alert('请选择身份');
            return;
          }
          var data = {
            username: _this.username,
            password: _this.password,
            type: _this.type,
          }
          axios.post('http://127.0.0.1:8080/equipment/login/login.action', data).then(result => {
            if (result.data.success) {
              sessionStorage.setItem('id', result.data.id);
              sessionStorage.setItem('username', result.data.username);
              sessionStorage.setItem('realname', result.data.realname);
              sessionStorage.setItem('role', result.data.role);
              if (result.data.role=="管理员"){ window.location.href = 'main.html';}
              else if (result.data.role=="用户"){window.location.href = 'user/usermain.html';}

            } else {
              alert(result.data.message);
              _this.reset();
            }
          })
        },
        reset: function () {
          this.username = '';
          this.password = '';
        },
      },
      created() { // 生命周期相关的函数
        sessionStorage.clear();
      },
    })
  </script>

</body>

</html>